<template>
  <div class="tab-optimize-effec">
    <ul>
      <li @click="cur = 0" :class="{ active: cur == 0 }">
        上海企业合作前后残保金优化效果
      </li>
      <li @click="cur = 1" :class="{ active: cur == 1 }">
        北京企业合作前后残保金优化效果
      </li>
    </ul>
    <div class="tab-content">
      <div v-show="cur == 0">
        <table class="cbj_table" align="center">
          <caption>
            说明：实际减免优化效果以企业实际情况为准
          </caption>
          <thead>
            <tr class="firstRow">
              <th rowspan="2" class="line-height72">企业</th>
              <th rowspan="2" class="line-height72">
                公司平均人数<br />（人）
              </th>
              <th rowspan="2" class="line-height72">
                月平均工资<br />（万元）
              </th>
              <th rowspan="2" class="line-height72">
                安置残疾人数量<br />（人）
              </th>
              <th colspan="3">残保金（万元）</th>
            </tr>
            <tr>
              <th>优化前</th>
              <th>优化后</th>
              <th>节省</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>北京A公司</th>
              <td>100</td>
              <td>10</td>
              <td>1.5</td>
              <td>13.5</td>
              <td>4</td>
              <td>9.5</td>
            </tr>
            <tr>
              <th>北京B公司</th>
              <td>500</td>
              <td>10</td>
              <td>7.5</td>
              <td>67.5</td>
              <td>21</td>
              <td>46.5</td>
            </tr>
            <tr>
              <th>北京C公司</th>
              <td>1000</td>
              <td>10</td>
              <td>15</td>
              <td>135</td>
              <td>42</td>
              <td>93</td>
            </tr>
            <tr>
              <th>北京D公司</th>
              <td>2000</td>
              <td>10</td>
              <td>30</td>
              <td>270</td>
              <td>77</td>
              <td>193</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-show="cur == 1">内容二</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabOptimizeEffec",
  data() {
    return {
      cur: 0, //默认选中第一个tab
    };
  },
};
</script>

<style lang="less" scoped>
.tab-optimize-effec {
  width: 60%;
  margin: 0 auto;
  height: 500px;
  //   background-color: khaki;
  ul {
    border-top: 2px solid #666;
    display: flex;
    font-size: 18px;
    color: #808080;
    padding: 20px 0;
    li {
      flex: 1;
      display: flex;
      justify-content: center;
      align-content: center;
    }
    li:hover {
      color: #000;
      font-weight: 600;
    }
  }
}
.active {
  color: #000;
  font-weight: 600;
}
table {
   width: 100%;
  .line-height72 {
    height: 72px;
  }
  tbody {
    tr {
      height: 60px;
      td {
        text-align: center;
      }
    }
  }
}
</style>